import React, { Component } from 'react';
import { NavBar } from 'antd-mobile'
import { create_add_cart, creat_cart_action_delete } from '../../store/actionCreator'
import { connect } from 'react-redux'
class Shopcart extends Component {
    goback(){
        this.props.history.go(-1)
    }
    minu(item){
        // store.dispatch({ type: 'DELETE_CART', params:item })
        // store.dispatch(request_minu_cart_action(item))
        this.props.do_sub_cart(item)
    }
    add(item){
        // store.dispatch({ type: 'ADD_CART', params:item })
        // store.dispatch(request_add_cart_action(item))
        this.props.do_add_cart(item)
    }
    render() {
        return (
            <div className='shopcart'>
                <NavBar onBack={()=>{this.goback()}}>
                    购物车({this.props.shopcartlist.length})
                </NavBar>
                
                {
                    // store.getState().shopcartlist.map((item, index) => {
                        this.props.shopcartlist.map((item, index) => {
                        return (
                            <div className="good" key={index}>
                                <input type="checkbox" name="" id="" defaultChecked />
                                <div className="img-box">
                                    <img src={item.pic} alt="" />
                                </div>
                                <div className="text">
                                    <div className="name">{item.name}</div>
                                    <div className="send">包邮包税</div>
                                    <div className="have">满￥200/800，享超值换购</div>
                                    <div className="price">
                                        <div className='value'>{item.salesPrice&&item.salesPrice.value}</div>
                                        <div className='btn'>
                                            <span className='minu' onClick={()=>{this.minu(item)}}>-</span>
                                            <span>{item.count}</span>
                                            <span className='add' onClick={()=>{this.add(item)}}>+</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

//connect 负责将当前Detail组件和redux store连接起来, 当store中的数据发生改变时, 当前组件会立即更新
export default connect(
    (state) => { //将store中的数据注入到组件属性中（props）
        return {
            shopcartlist: state.shopcartlist
        }
    }, (dispatch) => {//将dispatch以防法的形式 注入到组件属性中（props）
        return {
            do_add_cart(params) {
                dispatch(create_add_cart(params))//购物车+1
            },
            do_sub_cart(params) {
                dispatch(creat_cart_action_delete(params))//购物车-1
            },

        }
    })(Shopcart);